<template>
  <div style="width:100%" class="market marketCheck">
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}&nbsp;>&nbsp;市场宏观趋势&nbsp;>&nbsp;机会威胁分析&nbsp;>&nbsp;趋势分析&nbsp;>&nbsp;趋势影响&nbsp;>&nbsp;市场校验</div>
    <div class="market-new clearfix">
       <p>市场校验</p>
       <!--<p  class="col-xs-2">查看推荐&rsaquo;</p>-->
       <p class="go-back col-xs-2"  @click="$router.go(-1)">&lsaquo;&nbsp;&nbsp;返回上一步</p>
    </div>
    <div class="col-xs-12 border-r margin-top" style="padding-left: 0;padding-right: 0;background:#f6f6f6">
      <div class="col-xs-3 leftMarket">
        <p>参考信息</p>
        <el-collapse
          v-for="item,key in analysisObj"
          accordion
          style="margin-top：20px;">
          <el-collapse-item>
              <template slot="title">
                <p class="title">{{key}}</p>
              </template>
              <li style="word-break: break-all;" v-for="i,index in item"><span style="display:inline-block;width:5px;height:5px;border-radius:50%;background:#999999;margin:-5px 5px 0 0;"></span>{{i.analysisDetail}}</li>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="col-xs-9 margin-top rightMarket" >
        <div class="col-xs-4">
          <p @click="addMarket()">+&nbsp;添加市场</p>
        </div>
        <div class="product-box col-xs-4" v-for="i,index in marketKeyData" >
          <div class="each">
            <div class="product-title1">{{i.key}}</div>
            <div :class="`product-icon${index%4}`">NEWS{{index+1}}</div>
            <div class="product-content1">
              <div class="key-word">关键字:</div>
              <ul class="clearfix" v-for="item,index1 in i.list">
                <el-tooltip  v-if='!item.pShow'  effect="dark"  :content="item.keyWords" placement="top-start">
                  <p>{{item.keyWords}}</p>
                </el-tooltip>
                <!-- <p v-if='!item.pShow'>{{item.keyWords}}</p> -->
                <el-input maxlength=60 v-else style="width:70%" v-model="item.keyWords" placeholder="请输入内容"></el-input>
                <div>
                   <img
                     v-if='!item.pShow'
                     @click="editor(item)"
                     src="../../../images/editor.png" />
                   <img v-else @click='saveKey(item)' src="../../../images/save.png"/>
                </div>
                <div><img  src="../../../images/delete.png" @click="keyDelete(i.list,index1)"/></div>
              </ul>
              <ul class="clearfix" v-if="show">
               <el-input style="width:70%" v-model="keyValue" placeholder="请输关键字"></el-input>
                <div>
                   <img src="../../../images/save.png"/>
                </div>
                <div><img  src="../../../images/delete.png" @click="keyDelete(i.list,index1)"/></div>
              </ul>
            </div>
            <h3 @click="addKey(i.list)">+添加行</h3>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加市场弹框start -->
    <div class="pop-up-source">
      <el-dialog
        title="添加市场"
        :visible.sync="centerMarketVisible"
        width="53%"
        style="border-radius: 10px"
        :before-close="beforeClose"
        center>
        <div class="pop-cont-market ">
          <ul class="col-xs-12">
            <span class="col-xs-2">市场名称</span>
            <div class="col-xs-10 pop-market">
              <el-input maxlength=16 v-model="marketInput" placeholder="请输入市场名称"></el-input>
            </div>
          </ul>
          <ul class="col-xs-12">
            <span class="col-xs-2">关键字</span>
            <div class="col-xs-10">
              <el-input  maxlength=60 v-model="popkeyInput" placeholder="请输入关键字"></el-input>
            </div>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="sourceMarket()" style="width: 100px;height: 40px;margin: 200px 0 20px 0">确 定</el-button>
            <el-button @click="cancelSource()"  style="width: 100px;height: 40px;margin: 200px 0 20px 0">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!--添加市场弹框end-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      marketId: "",
      analysisId: "",
      analysisData: [],
      analysisObj: {},
      marketKeyData: [],
      show: false,
      keyValue: "",
      editorShow: true,
      pShow: true,
      centerMarketVisible: false,
      marketInput: "",
      keyInput: "",
      popkeyInput: ""
    };
  },
  mounted() {
    this.marketId = this.$store.state.id;
    // this.analysisId = this.$route.query.aId;
    // let analyId = this.analysisId;
    this.getAnalysisData();
    this.getkeyWord();
  },
  methods: {
    handleChange(e) {
      conole.log(e);
    },
    //添加市场
    addMarket() {
      this.centerMarketVisible = true;
    },

    //新增市场弹框接口
    sourceMarket() {

      if (this.marketInput.length === 0) {
        this.$message({
          message: "市场名称不能为空",
          type: "error"
        });
        return;
      } else if (this.popkeyInput.length === 0) {
        this.$message({
          message: "关键字不能为空",
          type: "error"
        });
        return;
      } else {
        this.$http
          .post(this.GLOBAL.host, {
            method: "addMarketKeyWords",
            data: {
              marketId: this.marketId,
              groupName: this.marketInput,
              keyWords: this.popkeyInput
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              //刷新获取关键字
              this.getkeyWord();
              this.centerMarketVisible = false;
              (this.marketInput = ""), (this.popkeyInput = "");
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
    },
    //
    cancelSource() {
      this.centerMarketVisible = false;
      (this.marketInput = ""), (this.popkeyInput = "");
    },
    beforeClose(){
       this.centerMarketVisible = false;
      (this.marketInput = ""), (this.popkeyInput = "");
    },
    //获取左侧的参考信息
    getAnalysisData() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysisDetail",
          query: {
            marketId: this.$store.state.id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            this.analysisData = res.data.data;
            let analysisArr = this.analysisData;
            let obj = {};
            for (let i in analysisArr) {
              if (obj[analysisArr[i].detailType] === undefined) {
                obj[analysisArr[i].detailType] = [];
              }
              obj[analysisArr[i].detailType].push(analysisArr[i]);
            }
            this.analysisObj = obj;
          }
        })
        .catch(error => {});
    },
    //获取市场的关键字信息
    getkeyWord() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketKeyWords",
          query: {
            marketId: this.marketId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(this.marketKeyData);
            let data = res.data.data;
            let arr = [];
            for (let i in data) {
              for (let a in data[i]) {
                data[i][a].pShow = false;
              }
              arr.push({ key: i, list: data[i] });
            }

            this.marketKeyData = arr;
          }
        })
        .catch(error => {});
    },
    keyDelete(list,index) {
      console.log(index);
      console.log(list)
      let e = list[index]
      if(e.id==''){
        list.splice(index,1)
        return
      }
      this.$http
        .post(this.GLOBAL.host, {
          method: "delMarketKeyWordsById",
          data: { id: e.id }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "关键字删除成功",
              type: "success"
            });
            this.getkeyWord();
          } else if (res.data.code == 203) {
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        })
        .catch(error => {});
    },
    //添加行
    addKey(e) {
      console.log(e)
      e.push({
        keyWords: "",
        groupName: e[0].groupName,
        creator: this.$store.state.user.id,
        createTime: null,
        id: "",
        marketId: "",
        pShow: true,
      });
      console.log(e);
    },
    //新增添加一行保存
    addSaveKey(item) {},
    editor(item) {
      item.pShow = true;
    },
    saveKey(item) {
      console.log(123);
      if (item.id != "") {
        //如果id不为空为修改
        if(item.keyWords==''){
          return
        }
        this.$http
          .post(this.GLOBAL.host, {
            method: "updateMarketKeyWords",
            data: {
              id: item.id,
              keyWords: item.keyWords
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "关键字修改成功",
                type: "success"
              });
              item.pShow = false;
              //修改成功后刷新市场
              // this.getkeyWord(this.marketId);
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      } else {
        //如果id=''为新增
        if(item.keyWords==''){
          return
        }
        this.$http
          .post(this.GLOBAL.host, {
            method: "addMarketKeyWords",
            data: {
              marketId: this.marketId,
              groupName: item.groupName,
              keyWords: item.keyWords
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "单条关键字添加成功",
                type: "success"
              });
              item.pShow = false;

              //刷新获取关键字
              this.getkeyWord(this.marketId);
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
    }
  }
};
</script>
<style lang="less" scoped>
.marketCheck {
  .el-dialog--center {
    border-radius: 10px !important;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .el-input {
    margin: 5px 0;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #f5f5f5;
  }
  .pop-cont-market {
    span {
      line-height: 40px;
    }
  }
  .el-collapse {
    margin-bottom: 10px;
    li {
      text-align: left;
      width: 90%;
      margin: auto;
      color: #333333;
    }
    .title {
      text-align: left;
      margin: auto;
      width: 90%;
      font-size: 14px;
      color: #8c8c8c;
      // border-bottom: 1px solid #e0e0e0
    }
  }
  .border-r {
    border-radius: 5px;
    background-color: white;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    display: block;
  }
  .sub-title {
    border-left: 3px solid #3dc4d8;
    padding-left: 15px;
  }
  .border-r2 {
    border-radius: 5px;
    background-color: white;
    width: calc(100% - 15px);
    margin-left: 15px;
    margin-right: 7.5px;
    display: block;
  }
  .sub-banner {
    background-color: #eeeeee;
    height: 27px;
    line-height: 27px;
    padding-left: 15px;
    border-radius: 5px 5px 0 0;
  }
  .market-new {
    width: 100%;
    height: 35px;
    line-height: 35px;
    margin-top: 30px;
    > p:nth-child(1) {
      float: left;
      margin-left: 20px;
    }
    /*> p:nth-child(2) {*/
      /*float: right;*/
      /*background: linear-gradient(to right, #3bc9e2, #08acf2);*/
      /*text-align: center;*/
      /*color: #fff;*/
      /*border-radius: 5px;*/
      /*margin-right: 20px;*/
      /*cursor: pointer;*/
    /*}*/
    > p:nth-child(2) {
      float: right;
      cursor: pointer;
      padding: 0;
      float: right;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      background: #acc6d3;
      margin-right: 10px;
    }
  }
  .leftMarket {
    background: #e7e6e6;
    height: 800px;
    padding-bottom: 20px;
    overflow: scroll;
    text-align: center;
    .el-collapse-item__header {
      text-align: left;
    }
    > p:nth-child(1) {
      line-height: 40px;
      height: 40px;
      padding-left: 10px;
      margin-bottom: 0;
      text-align: center;
    }
  }
  .rightMarket {
    background: #f6f6f6;
    height: 800px;
    overflow: scroll;
    margin-top: 0;
    > div {
      //background: #fff;
      height: 800px;
      margin-bottom: 10px;
    }
    .product-box {
      background: #f6f6f6;
      .each {
        background: #fff;
        height: 100%;
        margin: auto;
        position: relative;
        > .product-title1 {
          text-align: center;
          line-height: 150px;
          height: 150px;
          background: #e7e6e6;
          color: #8f8f8f;
          font-size: 16px;
        }
        > .product-icon0 {
          color: white;
          border-radius: 50%;
          background-color: #fd8297;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon1 {
          color: white;
          border-radius: 50%;
          background-color: #9c96e7;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon2 {
          color: white;
          border-radius: 50%;
          background-color: #64bef5;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon3 {
          color: white;
          border-radius: 50%;
          background-color: #3fcce1;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-content1 {
          height: 500px;
          height: 550px;
          overflow: scroll;
          > .key-word {
            padding-left: 20px;
            font-size: 14px;
            color: #666666;
          }
          > ul {
            width: 100%;
            margin: 0;
            padding-left: 10px;
            > p {
              float: left;
              width: 70%;
              padding-left: 10px;
              line-height: 40px;
              color: #666666;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            > div {
              float: left;
              width: 15%;
              display: flex;
              justify-content: center;
            }
            img {
              width: 20px;
              height: 20px;
              margin-top: 10px;
            }
          }
        }
        > h3 {
          font-size: 14px;
          color: #747474;
          margin-left: 10px;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          width: 30%;
          text-align: center;
          line-height: 40px;
          height: 40px;
        }
      }
    }
    > div:nth-child(1) {
      p {
        width: 100%;
        height: 100%;
        background: #edecec;
        line-height: 800px;
        text-align: center;
        font-size: 20px;
      }
    }
  }
  .infoMarket {
    padding: 0;
    background: #ffffff;
    border-radius: 5px;
    //border-bottom-right-radius:5px ;
  }
}
</style>
<style lang="less">
</style>
